<template>
  <div class="goods-relevant">
    <div class="header">
      <i class="icon" />
      <span class="title">{{goodsId?'同类商品推荐':'猜你喜欢'}}</span>
    </div>
    <!-- 此处使用改造后的xtx-carousel.vue -->
    <el-carousel :autoplay="false" v-if="sliders.length" indicator-position="outside">
      <el-carousel-item v-for="(item,index) in sliders" :key="index" class="goodCarousel">
        <router-link :to="`/product/${sub.id}`" v-for="sub in item" :key="sub.id" >
          <img v-lazyload="sub.picture"  alt="">
          <p class="ellipsis"> {{sub.name}}</p>
          <span class="price">￥{{sub.price}}</span>
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { findRelGoods } from '@/api/goods'
import {onMounted, ref } from 'vue'
export default {
  // 同类推荐，猜你喜欢
  name: 'GoodsRelevant',
  props:{
    goodsId:{
      type:String,
      default: undefined
    }
  },
  setup(props) {
    const sliders = ref([])
    onMounted( async ()=>{
      const { result } =  await findRelGoods(props.goodsId)
      // 每页4条
      const size = 4
      const total = Math.ceil(result.length / size)
      for( let i=0; i<total; i++) {
        sliders.value.push( result.slice(i*size, (i+1)*size ) )
      }
    })
    return {
      sliders
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-carousel__button{
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  margin-bottom: 20px;
  background-color: rgba(0,0,0,0.2);
}
::v-deep .is-active .el-carousel__button{
  background-color: $xtxColor;
}
.goods-relevant {
  background: #fff;
  min-height: 460px;
  margin-top: 20px;
  .header {
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    .title {
      font-size: 20px;
      padding-left: 10px;
    }
    .icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      border-top: 4px solid $xtxColor;
      border-right: 4px solid $xtxColor;
      box-sizing: border-box;
      position: relative;
      transform: rotate(45deg);
      &::before {
        content: "";
        width: 10px;
        height: 10px;
        position: absolute;
        left: 0;
        top: 2px;
        background: lighten($xtxColor, 40%);
      }
    }
  }
  .goodCarousel{
    display: flex;
    ::v-deep .el-carousel__button{
      width: 14px !important;
      height: 14px !important;
      border-radius: 50%;
      margin-bottom: 20px;
      background-color: rgba(0,0,0,0.2);
    }
    ::v-deep .is-active .el-carousel__button{
      background-color: rgb(177, 98, 98);
    }
    a{
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      &:hover{
        @include hoverShadow;
      }
      img{
        width: 230px;
        height: 230px;
        padding: 20px;
      }
      p{
        text-align: center;
        width: 180px;
      }
      .price{
        padding-top: 10px;
        color: $priceColor;
      }
    }
  }
}
</style>